<template>
	<view class="navbar">
		<!-- <view class="navbar_continar"> -->
			<!-- 状态栏,解决小程序顶部状态位置问题 -->
			<!-- <view :style="{height:statusBarHeight+'px'}"></view> -->
			
			<!-- <view class="navbar_content" :class="isSeach?'noPadding':''" :style="{height:navBarHeight+'px', width: widowHeight+'px'}"> -->
				
				<!-- <view v-if="!isSeach" class="navbar_input" @click="openTo">
 					<view class="navbar_icon"> -->
						<!-- 使用uniapp自带的icon库,需要重启才能生效 https://ext.dcloud.net.cn/plugin?id=28#rating -->
						<!-- <uni-icons type="search" color='#ccc' size="16px"></uni-icons>
					</view>
					<text class="navbar_text">请输入搜索信息</text>
				</view>
			<view class=" inptSearch" v-else>
				<uni-icons  @click="goToBack"  type="back" size="30" color="#fff"></uni-icons>
				<input class="input-centen" type="text" v-model="val" @input="inputChang" placeholder="请输入搜索信息" />
			</view>
			</view> -->

			<!-- <text>导航栏</text> -->

		<!-- </view> -->
		<view :style="{height:statusBarHeight+'px'}"></view>
		<!-- <view  :style="{height:navBarHeight+statusBarHeight+'px'}"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight:40,
				widowHeight: 375,
				val:"",
			};
		}, 
		props:{
			isSeach:{
				type:Boolean,
				default:false
			},
			lable:{
					type:[String, Number],
					default:''
			}
		},
		watch:{
			lable(newVal){
				this.val = newVal
			}
		},
		created() {
			// 同步获取手机信息 , statusBarHeight 为导航栏的高度
			const info = uni.getSystemInfoSync();
			// 给状态栏赋值当前手机的状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.widowHeight = info.windowWid 
			// H5 app mp-alipay 不支持当前API需要写条件编译
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			//获取小程序中 的胶囊位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 自动获取小程序的navbar的高度 = (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度)
			let navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
			this.navBarHeight = navBarHeight
			this.widowHeight = menuButtonInfo.left
			// console.log(navBarHeight);
			// #endif
		},
		methods:{
		    openTo(){
		    	uni.navigateTo({
		    		url:"/pages/views/classIfy_seach/classIfy_seach",
		    	})
		    },
			inputChang(e){
				let {value} = e.detail
				// console.log(value);
				this.$emit("input",value)
			},
			goToBack(){
				// console.log("返回了");
				uni.navigateBack()
				// uni.switchTab()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar_continar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		box-sizing: border-box;
		width: 100%;
		background: #000;
		// display: flex;
		// flex-direction: column;
		// justify-content: center;
		// align-items: center;

		.navbar_flex {
			// height:35px;
			// width: 100%;
		}

		.navbar_content {
			box-sizing: border-box;
			display: flex;
			// flex-direction: column;
			justify-content: center;
			width: 100%;
			align-items: center;
			padding: 0 15px;
			height: 45px;

			.navbar_input {
				background: #222222;
				height: 30px;
				border-radius: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				padding-left: 15px;
				.navbar_icon {
					margin-right: 5px;
				}
				.navbar_text {
					color: #ccc;
				}
			}
			.inptSearch{
				display: flex;
				padding-left: 0px;
				align-items: center;
				height: 100%;
				width: 100%;
				.uni-icons{
					padding:0 10px;
				}
				.input-centen{
					background-color: #FFFFFF;
					width: 100%;
					height: 30px;
					border-radius: 15px;
					padding-left: 15px;
				}
			}

		}
		.noPadding{
			padding-left: 0px;
		}
	}
</style>
